<template>
  <div class="center-header fx-center">
    <div class="select-item">
      <div class="select-item_lable">矿种</div>
      <el-select v-model="activeMineral" value-key="id" placeholder="选择矿种" @change="changeMineral" :popper-append-to-body="false">
        <el-option v-for="option in mineralSpecies" :key="option.id" :label="option.name" :value="option.id"></el-option>
      </el-select>
    </div>
    <div class="select-item">
      <div class="select-item_lable">年度</div>
      <el-select v-model="activeYear" placeholder="选择年度" @change="changeYear" :popper-append-to-body="false">
        <el-option v-for="option in years" :key="option" :label="option" :value="option"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

/*矿种列表*/
const mineralSpecies = ref([
  { name: '矿种1', id: '1' },
  { name: '矿种2', id: '2' }
]);
const activeMineral = ref(null);
function changeMineral() {}

/*年度*/
const years = ['2010', '2012'];
const activeYear = ref(null);
function changeYear() {}
</script>
